<template>
    <div>
      <el-drawer
        :with-header="false"
        :size="800"
        :visible.sync="createDrawer"
        direction="rtl"
        :before-close="handleClose"  
      >
        <div>
          <div class="head">
            <div class="title">{{ packData.name?'编辑':'创建' }}套餐</div>
          </div>
          <div class="demo-drawer__content">
            <el-row class="mt20">
              <el-col :span="18">
                <el-form
                  ref="userField"
                  size="small"
                  :rules="ruleValidate"
                  :model="userInfo"
                  label-width="130px"
                  @submit.native.prevent
                  >
                  <el-form-item label="名称：" prop="name">
                    <el-input
                      type="text"
                      size="small"
                      placeholder="请输入名称"
                      v-model="userInfo.name"
                    />
                  </el-form-item>

                  <el-form-item label="价格：" prop="price">
                    <el-input
                      type="number"
                      size="small"
                      placeholder="请输入价格"
                      v-model="userInfo.price"
                    />
                  </el-form-item>
                  
                  <el-form-item label="总桶数：" prop="total_number">
                    <el-input
                      type="number"
                      size="small"
                      placeholder="请输入总桶数"
                      v-model="userInfo.total_number"
                    />
                  </el-form-item>
                  
                  <el-form-item label="每桶返还：" prop="return_per">
                    <el-input
                      type="number"
                      size="small"
                      placeholder="请输入每桶返还数"
                      v-model="userInfo.return_per"
                    />
                  </el-form-item>
                  <el-form-item label="送水费：" prop="send_per">
                    <el-input
                      type="number"
                      placeholder="请输入送水费"
                      size="small"
                      v-model="userInfo.send_per"
                    />
                  </el-form-item>
                  

                  
                </el-form>   
              </el-col>
              <el-col :span="23">
                <div class="demo-drawer__footer">
                  <el-button @click="handleClose" size="small">取 消</el-button>
                  <el-button type="primary" @click="submitForm('userField')" :loading="loading" size="small">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
         </div>  
      </el-drawer>
    </div>
  </template>
  <script>
  
  import { addUserApi,userLstApi,packageCreate,packageEdit } from '@/api/user'
  export default {
    name: 'PackEdit',
    props: {
      createDrawer: {
        type: Boolean,
        default: false,
      }, 
      packData:{
        type:Object,
        default:()=>{
            return {}
        }
      }
    },
    data() {
      const validatePhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入手机号'))
        } else if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('格式不正确!'))
        } else {
          callback()
        }
      }
      const validateCard = (rule, value, callback) => {
        if (value && !/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/.test(value)) {
          callback(new Error('格式不正确!'))
        } else {
          callback()
        }
      }
      let validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.userInfo.pwd) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        loading: false,
        userInfo: {
          avatar: "",
          pagent_id:'',
        },
        ruleValidate: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          price: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          total_number: [{ required: true, message: '请输入总桶数', trigger: 'blur' }],
          return_per: [{ required: true,message: '请输入每桶返还数', trigger: 'blur' }],
          send_per: [{required: true,message: '请输入送水费', trigger: 'blur'}],
        },
        userList:[],
        userPagentList:[],
      }
    },
    mounted() {
        console.log('this.packData',this.packData)
      if(this.packData.name){
        this.userInfo = this.packData;
      }
    },
    methods: {
      handleClose() {
        this.resetData()
        this.$emit('closeDrawer');
      },
      resetData(){
        this.$refs.userField.resetFields()
        this.userInfo={}
      },
      
      submitForm(name){
        
        this.loading = true;
        this.$refs[name].validate(valid => {
          if (valid) {
            if(this.packData.name){
                packageEdit(this.packData.id,this.userInfo).then(async res => {
                  this.loading = false;
                  this.$message.success(res.message);
                  this.$emit('closeDrawer');
                  this.$emit('getList');
                })
                .catch(res => {
                  this.loading = false;
                  this.$message.error(res.message);
                })
            }else{
                packageCreate(this.userInfo).then(async res => {
                  this.loading = false;
                  this.$message.success(res.message);
                  this.$emit('closeDrawer');
                  this.$emit('getList');
                })
                .catch(res => {
                  this.loading = false;
                  this.$message.error(res.message);
                })
            }
          }else{
            this.loading = false;
          }
        });
      },
      
      
      forceNumberInput(event){
        this.userInfo.pay_password = event.replace(/\D/g, '');
        if(event.length>6){
          this.userInfo.pay_password = event.substring(0, 6)
        }
      },
      setData(data){
        console.log('this.packData',data)
        if(data.name){
            this.userInfo = data;
        }
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
    .head {
      padding: 15px 20px;
      border-bottom: 1px solid #DCDFE6;
      .title {
        font-weight: bold;
        font-size: 14px;
        line-height: 16px;
        color: rgba(0, 0, 0, 0.85);
      }
    }
    .demo-drawer__footer{
      text-align: right;
      padding: 20px 0;
    }
  </style>
  